<template>

   <!-- 解决商品闪烁问题 因为页面加载数据为空 有就显示没有就不显示 -->
     <view v-if="goods_info.goods_name" class="goods_detail-containter"> 
       <!-- 商品详情页 轮播图区域 :circular="true"衔接良好-->
       <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
         <swiper-item v-for="(item,i) in goods_info.pics" :key="i">
           <!-- 2.1 点击当前图片的索引，传递到preview() 处理函数中 -->
           <image :src="item.pics_big" @click="preview(i)"></image>
         </swiper-item>
       </swiper>
       <!-- 商品信息区域 -->
       <view class="goods_info-box">
         <!-- 商品价格 -->
         <view class="price">￥{{goods_info.goods_price}}</view>
         <!-- 信息主题区域 -->
         <view class="goods-info-body">
           <!-- 商品名称 -->
           <view class="goods-name">{{goods_info.goods_name}}</view>
           <!-- 收藏 -->
           <view class="favi">
             <uni-icons type="star" size="18" color="gray"></uni-icons>
             <text>收藏</text>
           </view>
         </view>  <!-- goods-info-body  ending -->
         <!--  运费-->
         <view class="yf">快递：免运费 </view>
       </view>  <!-- goods_info-box  ending -->
       <!-- 商品详情图片 -->
       <rich-text :nodes="goods_info.goods_introduce"></rich-text>
       <!-- 商品导航区域 -->
       <!-- fill 控制右侧按钮的样式  options： 左侧按钮的配置项 -->
       <!-- buttonGroup 右侧按钮的配置项 -->
       <view class="goods_nav">
       <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
     </view>   <!-- goods_nav  ending -->
     </view> <!-- 最外层 ending -->
</template>

<script>
  // 1.1 从vuex 中按需导入 mapState 辅助方法 mapGetters
  import { mapState ,mapMutations , mapGetters} from 'vuex'
  export default {
    // 1.2 定义一个计算属性
    computed: {
      // 调用 mapState 方法 把 my_cart 模块中的cart 数组映射到页面中，作为计算属性
    // ...mapState('模块名称', ['要映射的数据名称1'，'要映射的数据名称2']),
    ...mapState('my_cart', []),
    // 3.11 把my_cart 模块中名为 total 的getter 映射到当前页面
    ...mapGetters('my_cart', ['total']),
    },
     watch: {
     // 页面首次加载完毕后，不会调用这个侦听器text
       total: {
          handler(newVal){
            const findResult = this.options.find(x => x.text === '购物车')
            // const findResult = this.options[1].text
            console.log(findResult)
            if (findResult) {
               findResult.info = newVal
            }
          },
          // 使页面打开就渲染监听器
          immediate:true
    }
  },
    data() {
      return {
        // 1.1 商品详情对象
              goods_info:{},
              // 商品导航区数据 options左侧按钮的配置项
               options: [{
                          icon: 'shop',
                          text: '店铺',                 
                      }, {
                          icon: 'cart',
                          text: '购物车',
                          info: 0
                      }],
                      // 右侧按钮的配置项
                      buttonGroup: [{
                        text: '加入购物车',
                        backgroundColor: '#ff0000',
                        color: '#fff'
                      },
                      {
                        text: '立即购买',
                        backgroundColor: '#ffa200',
                        color: '#fff'
                      }
                      ]
      };
    
    }, // data ending
    // 生命周期函数
    onLoad(options) {
         // 1.2 console.log(options) 获取商品id
         const goods_id = options.goods_id
         // 1.3 调用请求商品数据的方法
         this.getGoodsDetail(goods_id)
       },
       
       methods:{
         // 2.22 把my_cart 模块中的addToCart 方法映射到当前页面使用
         ...mapMutations('my_cart', ['addToCart']),
         async getGoodsDetail(goods_id) {
           const {data: res} = await uni.$http.get('/api/public/v1/goods/detail',{goods_id})
           if(res.meta.status !== 200) return uni.$showMsg()
           // 解决图片底部空白缝隙的问题，使用字符串的replace()方法 为img添加新的行内style
           res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g,'jpg')
           // 为data 中的数据赋值
           this.goods_info = res.message
           console.log(this.goods_info)
         },
         // 2.2 点击大图预览
         preview(i) {
           // 调用 uni.previewImage() 方法预览图片
           uni.previewImage({
             // 预览时，默认显示图片的索引
             current:i,
             urls:this.goods_info.pics.map(x => x.pics_big)
           })
         },
         onClick(e) {
           // console.log(e)
           if(e.content.text === '购物车') {
             // 切换到购物车页面
             uni.switchTab({
               url:'/pages/cart/cart'
             })
           }
         },        
         buttonClick(e) {
           console.log(e)
           // 2.33 判断是否点击了加入购物车按钮
           if(e.content.text === '加入购物车') {
             // 2.44 组织一个商品信息对象
             // goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state
             const goods = {
               goods_id: this.goods_info.goods_id,  //商品的id
               goods_name:this.goods_info.goods_name,  //商品的名称
               goods_price:this.goods_info.goods_price,  //商品的价格
                goods_count: 1,     //商品的数量
               goods_small_logo:this.goods_info.goods_small_logo,  //商品的图片
               goods_state:this.goods_info.goods_state,  //商品的勾选状态
             }
             // 2.55 通过this映射过来的 addToCart 方法，将商品信息对象存储到购物车中
             this.addToCart(goods)
           }
         }
       } // methods  ending
}
</script>

<style lang="scss">
swiper {
  height:750rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.goods_info-box {
  padding: 10px;
  padding-right: 0;
  .price {
    color: #C00000;
    font-size: 18px;
    margin: 10px 0;
  }
  .goods-info-body{
    display: flex;
    justify-content: space-between;
    .goods-name{
      font-size: 13px;
      padding-right: 10px;
    }
    // favi 收藏
    .favi{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 120px;
      font-size: 12px;
      border-left: 1px solid #efefef;
      color: gray;
    }
  }
  // yf 运费
  .yf {
    margin: 10px 0;
    font-size: 12px;
    color: gray;
  }
}
.goods_detail-containter {
 padding-bottom: 50px;
}
.goods_nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
